<template>
	<div class="">
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="bghhhhh">
						<div class="rightCon">
							<headerPcTow :title="$t('l_baobiao')" :isShow="true"></headerPcTow>

							<div class="con1One">
								<div class="headerTow">
									<div :class="'hitemTow ' + ((index+1) == is_tab?'active':'')"
										v-for="(item,index) in navList" :key="index" @click="changeNav(item,index)">
										<div class="nav_text">
											{{ item.name }}
										</div>
										<!-- <div class="nav_tab_box">
											<p class="tab_text">16</p>
											<p></p>
										</div> -->
									</div>
								</div>
								<div class="select_classThree" v-show="is_tab==1">
									<select v-model="sele" @change="chageSelect" class="pcSele">
										<option value="1">{{$t('l_jintian')}}</option>
										<option value="2">{{$t('l_zuotian')}}</option>
										<option value="3">{{$t('l_jinqitian')}}</option>
										<option value="4">{{$t('l_jin15tian')}}</option>
										<option value="5">{{$t('l_jin30tian')}}</option>
									</select>
									<!-- onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0" -->
									<select v-model="sele2" @change="chageSelect2" style="margin-left: 5px;"
										class="pcSele">
										<option value="-1">{{$t('l_quanbuleixing')}}</option>
										<option :value="item.id" v-for="(item,index) in balanceTypeList" :key="index">
											{{item.title}}
										</option>
									</select>
								</div>
								<div class="select_classThree" v-show="is_tab==2">
									<select v-model="sele" @change="chageSelect" class="pcSele">
										<option value="1">{{$t('l_jintian')}}</option>
										<option value="2">{{$t('l_zuotian')}}</option>
										<option value="3">{{$t('l_jinqitian')}}</option>
										<option value="4">{{$t('l_jin15tian')}}</option>
										<option value="5">{{$t('l_jin30tian')}}</option>
									</select>
									<select v-model="sele3" @change="chageSelect3" style="margin-left: 5px;"
										class="pcSele">
										<option value="-1">{{$t('l_buxianleixing')}}</option>
										<option value="2">{{$t('l_dianzi')}}</option>
										<option value="7">{{$t('l_qipai')}}</option>
										<option value="6">{{$t('l_buyu')}}</option>
										<option value="1">{{$t('l_zhenren')}}</option>
										<option value="4">{{$t('l_tiyu')}}</option>
										<option value="3">{{$t('l_caipiao')}}</option>
									</select>
									<select v-model="sele4" @change="chageSelect4" style="margin-left: 5px;"
										class="pcSele">
										<option value="-1">{{$t('l_buxianpingtai')}}</option>
										<option :value="item.code" v-for="(item,index) in getPtList" :key="index">
											{{item.name}}
										</option>
									</select>
								</div>
								<div class="select_classThree" v-show="is_tab==3"
									style="display: flex;justify-content: space-between;">
									<div>
										<select v-model="sele" @change="chageSelect" class="pcSele">
											<option value="1">{{$t('l_jintian')}}</option>
											<option value="2">{{$t('l_zuotian')}}</option>
											<option value="3">{{$t('l_jinqitian')}}</option>
											<option value="4">{{$t('l_jin15tian')}}</option>
											<option value="5">{{$t('l_jin30tian')}}</option>
										</select>
										<select v-model="sele2" @change="chageSelect3" style="margin-left: 10px;"
											class="pcSele">
											<option value="1">{{$t('l_quanbuleixing')}}</option>
										</select>
										<select v-model="sele3" @change="chageSelect4" style="margin-left: 10px;"
											class="pcSele">
											<option value="1">{{$t('l_quanbupingtai')}}</option>


										</select>
									</div>
									<div style="font-size: 0.14rem;color:var(--theme-alt-neutral-2);display: flex;align-content: center">
										<div>
											<div>{{$t('l_zhudanliang')}}/</div>
											<div>{{$t('l_touzhu')}}/</div>
											<div>{{$t('l_zongshuying')}}</div>
										</div>
										<span class="tops">
											<span class="top1"></span>
											<span class="top2"></span>
										</span>
									</div>
								</div>
								<div class="ul" style="width: 100%;padding-bottom: 20px;" v-if="is_tab == 1">
									<div class="fanshuiBox">
										<ul>
											<li>{{$t('l_zhangbianleixing')}}</li>
											<li>{{$t('l_shijian')}}</li>
											<li>{{$t('l_jine')}}</li>
										</ul>
										<div class="fanlistBox"  v-if="lists.length != 0">
											<ul v-for="(item,index) in lists" :key="index">
												<li>
													{{item.type_name}}
												</li>
												<li>
													{{$F.date('Y-m-d H:i:s',item.create_time)}}
												</li>
												<li>
													¥{{item.money>0?'+'+item.money:item.money}}
												</li>
											</ul>
										</div>
										<!-- <div class="block">
													<el-pagination @size-change="handleSizeChange" class="pageInpt"
														@current-change="handleCurrentChange" :current-page="currentPage4"
														background
														:page-sizes="[100, 200, 300, 400]" :page-size="100"
														layout="total, sizes, prev, pager, next, jumper" :total="400">
													</el-pagination>
												</div> -->
									</div>
								</div>
								<div class="ul" style="width: 100%;padding-bottom: 20px;" v-if="is_tab == 2">
									<div class="fanshuiBox">
										<ul>
											<!-- <li>{{$t('l_leixing')}}</li> -->
											<li>{{$t('l_youxi')}}</li>
											<li>{{$t('l_xiazhujine')}}</li>
											<li>{{$t('l_shuyingjine')}}</li>
											<li>{{$t('l_zhuangtai')}}</li>
											<li>{{$t('l_dingdanhao')}}</li>
											<li>{{$t('l_shijian')}}</li>
											<li>{{$t('l_qshu')}}</li>
										</ul>
										<div class="fanlistBox" v-if="lists.length != 0">
											<ul v-for="(item,index) in lists" :key="index" >
												<!-- <li>
													<div class="liOne">
														<img :src="$F.getApiUrl()+'/gametype/'+item.platType+'.png'"
															alt="">
														<div>{{item.pt_name}}</div>
													</div>
												</li> -->
												<li>
													{{item.gameType == 2?$t('l_dianzi'):''}}
													{{item.gameType == 7?$t('l_qipai'):''}}
													{{item.gameType == 6?$t('l_buyu'):''}}
													{{item.gameType == 1?$t('l_zhenren'):''}}
													{{item.gameType == 4?$t('l_tiyu'):''}}
													{{item.gameType == 3?$t('l_caipiao'):''}}

													- {{item.gameName}}
												</li>
												<li>
													{{item.validAmount}}
												</li>
												<li>
													{{item.settledAmount}}
												</li>
												<li v-if="!item.status_name">
													
													<span v-if="item.status == 0"
														style="color:#fff;">{{$t('l_weiwancheng')}}</span>
													<span v-if="item.status == 1"
														style="color:#fff;">{{$t('l_yiwancheng')}}</span>
													<span v-if="item.status == 2"
														style="color:#fff;">{{$t('l_yiquxiao')}}</span>
													<span v-if="item.status == 3"
														style="color:#fff;">{{$t('l_yichedan')}}</span>
												</li>
												<li v-else>
												
													<span
														style="color:#fff;">{{item.status_name?item.status_name:''}}</span>
			
												</li>
												<li>
													{{item.gameOrderId}}
												</li>
												<li>
													{{$F.date('Y-m-d H:i:s',item.betTime)}}
												</li>
												<li>{{item.more?item.more.expect:''}}</li>

											</ul>
										</div>
										<!-- <div class="block">
													<el-pagination @size-change="handleSizeChange" class="pageInpt"
														@current-change="handleCurrentChange" :current-page="currentPage4"
														background
														:page-sizes="[100, 200, 300, 400]" :page-size="100"
														layout="total, sizes, prev, pager, next, jumper" :total="400">
													</el-pagination>
												</div> -->
									</div>
								</div>
								<div class="rightThree" v-if="lists.length == 0">
									<div class="nodataTow">
										<img src="../../assets/images/yh/nodata.png" alt="">
										<div>{{$t('l_zanwujilu')}}</div>
									</div>
								</div>

								<div class="bottom_white_boxTow" style="font-size: 13px;color:var(--theme-alt-neutral-2);padding:10px;"
									v-show="is_tab==1">
									{{$t('l_leijichongzhi')}}<span
										style="color:#fff;margin-left: 1px;font-size:13px;margin-right: 10px;">￥{{all_cz}}</span>
									<span style="padding-left:0.6rem;">{{$t('l_leijitixian')}}</span> <span
										style="color:#fff;margin-left: 10px;font-size:13px;">￥{{all_tx}}</span>
								</div>
								<div class="bottom_white_boxTow"
									style="font-size:13px;color:var(--theme-alt-neutral-2);flex-direction: column;padding: 10px;align-items: flex-start;box-sizing: border-box;"
									v-show="is_tab==2">
									<div style="display: flex;align-items: center;width: 100%;">
										<div style="display: flex;align-items: center;">
											{{$t('l_leijizhudanliang')}}
											<div style="color:#fff;margin-left: 10px;font-size:13px;margin-right: 1px;">
												{{allCount}}
											</div>
										</div>
										<div style="display: flex;align-items: center;margin: 0px 100px;">
											<div style="padding-left: 1px;">{{$t('l_leijiyouxiaotouzhu')}}</div>
											<div style="color:#fff;margin-left: 10px;font-size: 13px;">{{allTz}}
											</div>
										</div>
										<div style="display: flex;align-items: center;margin-right: 100px;">
											<div style="padding-left: 1px;">{{$t('l_leijishuying')}}</div>
											<div style="color:#fff;margin-left: 10px;font-size: 13px;">{{allYk}}
											</div>
										</div>
										<div style="display: flex;align-items: center;">
											<div style="padding-left: 1px;">{{$t('l_jinriyouxiaotouzhu')}}</div>
											<div style="color:#fff;margin-left: 10px;font-size: 13px;">{{alltoday}}
											</div>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<div class="notice pageContainer">
					<navHeader :title="$t('l_baobiao')"></navHeader>

					<div class="container scroll-container" @scroll="scroll">
						<div class="nav_top_box">
							<div :class="'nav_item ' + ((index+1) == is_tab?'nav_active':'')"
								v-for="(item,index) in navList" :key="index" @click="changeNav(item,index)">
								<div class="nav_text">
									{{ item.name }}
								</div>
								<!-- <div class="nav_tab_box">
						<p class="tab_text">16</p>
						<p></p>
					</div> -->
							</div>
						</div>
						<div class="select_class" v-show="is_tab==1">
							<select v-model="sele" @change="chageSelect">
								<option value="1">{{$t('l_jintian')}}</option>
								<option value="2">{{$t('l_zuotian')}}</option>
								<option value="3">{{$t('l_jinqitian')}}</option>
								<option value="4">{{$t('l_jin15tian')}}</option>
								<option value="5">{{$t('l_jin30tian')}}</option>
							</select>
							<!-- onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0" -->
							<select v-model="sele2" @change="chageSelect2" style="margin-left: 5px;">
								<!-- <option value="-1">{{$t('l_quanbuleixing')}}</option> -->
								<option :value="item.id" v-for="(item,index) in balanceTypeList" :key="index">
									{{item.title}}
								</option>
							</select>
						</div>
						<div class="select_class" v-show="is_tab==2">
							<select v-model="sele" @change="chageSelect">
								<option value="1">{{$t('l_jintian')}}</option>
								<option value="2">{{$t('l_zuotian')}}</option>
								<option value="3">{{$t('l_jinqitian')}}</option>
								<option value="4">{{$t('l_jin15tian')}}</option>
								<option value="5">{{$t('l_jin30tian')}}</option>
							</select>
							<select v-model="sele3" @change="chageSelect3" style="margin-left: 5px;">
								<option value="-1">{{$t('l_buxianleixing')}}</option>
								<option value="2">{{$t('l_dianzi')}}</option>
								<option value="7">{{$t('l_qipai')}}</option>
								<option value="6">{{$t('l_buyu')}}</option>
								<option value="1">{{$t('l_zhenren')}}</option>
								<option value="4">{{$t('l_tiyu')}}</option>
								<option value="3">{{$t('l_caipiao')}}</option>
							</select>
							<select v-model="sele4" @change="chageSelect4" style="margin-left: 5px;">
								<option value="-1">{{$t('l_buxianpingtai')}}</option>
								<option :value="item.code" v-for="(item,index) in getPtList" :key="index">{{item.name}}
								</option>
							</select>
						</div>
						<div class="select_class" v-show="is_tab==3"
							style="display: flex;justify-content: space-between;">
							<div>
								<select v-model="sele" @change="chageSelect">
									<option value="1">{{$t('l_jintian')}}</option>
									<option value="2">{{$t('l_zuotian')}}</option>
									<option value="3">{{$t('l_jinqitian')}}</option>
									<option value="4">{{$t('l_jin15tian')}}</option>
									<option value="5">{{$t('l_jin30tian')}}</option>
								</select>
								<select v-model="sele2" @change="chageSelect3" style="margin-left: 10px;">
									<option value="1">{{$t('l_quanbuleixing')}}</option>


								</select>
								<select v-model="sele3" @change="chageSelect4" style="margin-left: 10px;">
									<option value="1">{{$t('l_quanbupingtai')}}</option>


								</select>
							</div>
							<div style="font-size: 0.14rem;color:var(--theme-alt-neutral-2);display: flex;align-content: center">
								<div>
									<div>{{$t('l_zhudanliang')}}/</div>
									<div>{{$t('l_touzhu')}}/</div>
									<div>{{$t('l_zongshuying')}}</div>
								</div>
								<span class="tops">
									<span class="top1"></span>
									<span class="top2"></span>
								</span>
							</div>
						</div>
						<div class="nodata" v-if="lists.length == 0">
							<img src="../../assets/images/yh/nodata.png" alt="">
							<div>{{$t('l_zanwujilu')}}</div>
						</div>
						<div class="notice_box" style="padding-bottom: 2rem;">
							<div class="notice_item_box" v-if="is_tab == 1">
								<div class="notice_item" v-for="(item,index) in lists" :key="index">
									<div class="notice_item_left">
										<div class="left_text_box">
											<div class="top_text">
												{{item.type_name}}
											</div>
											<div class="time_text">
												{{$F.date('Y-m-d H:i:s',item.create_time)}}
											</div>
										</div>
									</div>
									<div class="notice_item_right">
										<span style="color:#fff;">{{item.money>0?'+'+item.money:item.money}}
											¥</span>
									</div>
								</div>
							</div>

							<div class="notice_item_box" v-if="is_tab == 2">
								<div class="fanshuiritem" v-for="(item,index) in lists" :key="index">
								
									<div class="center">
										<div class="up">
											<div>{{$t('l_youxi')}}
												<span style="color:#fff;">

													{{item.gameType == 2?$t('l_dianzi'):''}}
													{{item.gameType == 7?$t('l_qipai'):''}}
													{{item.gameType == 6?$t('l_buyu'):''}}
													{{item.gameType == 1?$t('l_zhenren'):''}}
													{{item.gameType == 4?$t('l_tiyu'):''}}
													{{item.gameType == 3?$t('l_caipiao'):''}}

													- {{item.gameName}}</span>

											</div>
											<div class="righttext">{{$t('l_xiazhujine')}} <span
													style="color:#fff;">{{item.validAmount}}</span>
											</div>
										</div>
										<div class="up">
											<div>{{$t('l_shuyingjine')}} <span
													style="color:#ffaa09;">{{item.settledAmount}}</span></div>
											<div class="righttext" v-if="!item.status_name">{{$t('l_zhuangtai')}}
												<span v-if="item.status == 0"
													style="color:#fff;">{{$t('l_weiwancheng')}}</span>
												<span v-if="item.status == 1"
													style="color:#fff;">{{$t('l_yiwancheng')}}</span>
												<span v-if="item.status == 2"
													style="color:#fff;">{{$t('l_yiquxiao')}}</span>
												<span v-if="item.status == 3"
													style="color:#fff;">{{$t('l_yichedan')}}</span>
											</div>
											<div class="righttext" v-else>{{$t('l_zhuangtai')}}
												<span 
													style="color:#fff;">{{item.status_name}}</span>
										
											</div>
										</div>
										<div class="up" style="margin-bottom: 0;">
											<div>{{$t('l_dingdanhao')}} <span
													style="color:#fff;">{{item.gameOrderId}}</span></div>
											<div class="righttext">{{$t('l_shijian')}} <span
													style="color:#fff;">{{$F.date('Y-m-d H:i:s',item.betTime)}}</span>
											</div>
										</div>
										<div class="up" style="margin-bottom: 0;">
											<div>{{$t('l_qshu')}} <span
													style="color:#fff;">{{item.more?item.more.expect:''}}</span></div>
											
										</div>
										
									</div>
									<div class="icon" style="opacity: 0;">
										<i style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 21.999 35.998" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
											</svg>
										</i>
									</div>
								</div>
							</div>

							<div class="bottom_white_box" style="font-size: .22rem;color: var(--theme-text-color-lighten);padding: 0.2rem;"
								v-show="is_tab==1">
								{{$t('l_leijichongzhi')}}<span
									style="color:#fff;margin-left: 1px;font-size: .22rem;margin-right: 0.1rem;">￥{{all_cz}}</span>
								<span style="padding-left:0.6rem;">{{$t('l_leijitixian')}}</span> <span
									style="color:#fff;margin-left: 0.1rem;font-size: .22rem;">￥{{all_tx}}</span>
							</div>
							<div class="bottom_white_box"
								style="font-size: .22rem;color: var(--theme-text-color-lighten);flex-direction: column;padding: 0.2rem;align-items: flex-start;box-sizing: border-box;"
								v-show="is_tab==2">
								<div style="display: flex;align-items: center;width: 100%;">
									<div style="flex:1;display: flex;align-items: center;">
										{{$t('l_leijizhudanliang')}}
										<div style="color:#fff;margin-left: 1rem;font-size: .22rem;margin-right: 1px;">
											{{allCount}}
										</div>
									</div>
									<div style="flex:1;display: flex;align-items: center;">
										<div style="padding-left: 1px;">{{$t('l_leijiyouxiaotouzhu')}}</div>
										<div style="color:#fff;margin-left: .8rem;font-size: .22rem;">{{allTz}}</div>
									</div>
								</div>
								<div style="display: flex;align-items: center;width: 100%;">
									<div style="flex:1;display: flex;align-items: center;">
										{{$t('l_leijishuying')}}
										<div
											style="color:#fff;margin-left: 1rem;font-size: .22rem;margin-right: 1px;">
											{{allYk}}
										</div>
									</div>
									<div style="flex:1;display: flex;align-items: center;">
										<div style="padding-left: 1px;">{{$t('l_jinriyouxiaotouzhu')}}</div>
										<div style="color:#fff;margin-left: .8rem;font-size: .22rem;">{{alltoday}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				sele5: -1,
				sele4: -1,
				sele3: -1,
				sele2: -1,
				sele: 1,
				selects: [],
				lists: [],
				navIndex: 0,
				navList: [{
						id: 0,
						name: this.$t('l_zhanghumingxi')
					},
					{
						id: 1,
						name: this.$t('l_touzhujilu')
					},
					// {
					// 	id: 2,
					// 	name: '个人报表'
					// }
				],
				is_tab: 1,
				balanceTypeList: [],
				getPtList: [],
				page: 0,
				all_cz: 0,
				all_tx: 0,
				create_time: 1,
				is_end: 0,
				allCount: 0,
				allTz: 0,
				allYk: 0,
				alltoday: 0,
				navIndex1: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
			}
		},
		created() {},
		mounted() {
			if (this.$route.query.type) {
				this.sele2 = this.$route.query.type * 1
			}
			console.log('获取到的值', localStorage.getItem('record_index'))
			if (localStorage.getItem('record_index') > 0) {
				this.is_tab = Number(localStorage.getItem('record_index'))
			}
			this.balanceType()
			this.getPt()
			this.getList()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			scroll(e) {
				let h = e.target.scrollHeight - e.target.clientHeight - 20
				if (e.target.scrollTop >= h) {
					this.getList()
				}
			},
			getList() {
				if (this.is_tab == 1) {
					this.getBalance()
				} else {
					this.gameRecord()
				}
			},
			gameRecord() {
				if (this.apisuo) {
					return;
				}
				if (this.is_end) {
					return;
				}
				this.apisuo = true
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.page++;
				this.$api.gameRecord({
					page: this.page,
					platType: this.sele4,
					gameType: this.sele3,
					create_time: this.sele,
				}, (res) => {
					this.apisuo = false
					loading.close()
					if (res.code == 0) {
						if (res.data.list.length == 0) {
							this.is_end = true
						}
						this.lists = this.lists.concat(res.data.list)
						this.allCount = res.data.allCount
						this.allTz = res.data.allTz
						this.allYk = res.data.allYk
						this.alltoday = res.data.todayTz
					} else {
						this.$message.error(res.msg);
					}
				})
					//不从这个接口更新了---
				// this.$api.pgRecord({

				// },(res)=>{
				// 			console.log(res,'pg游戏记录')
				// })
			},
			getBalance() {
				if (this.apisuo) {
					return;
				}
				if (this.is_end) {
					return;
				}
				this.apisuo = true
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.page++;
				this.$api.getBalance({
					page: this.page,
					type: this.sele2,
					create_time: this.sele,
				}, (res) => {
					this.apisuo = false
					loading.close()
					if (res.code == 0) {
						if (res.data.list.length == 0) {
							this.is_end = true
						}
						this.lists = this.lists.concat(res.data.list)
						this.all_cz = res.data.all_cz
						this.all_tx = res.data.all_tx
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			//获取全部游戏平台
			getPt() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.getPt({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.getPtList = res.data
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			//资金类型
			balanceType() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.balanceType({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.balanceTypeList = res.data
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			changeNav(item, index) {
				this.page = 0
				this.apisuo = false
				this.is_end = false
				this.lists = []
				this.is_tab = index + 1
				this.getList()
			},
			chageSelect() {
				this.page = 0
				this.apisuo = false
				this.is_end = false
				this.lists = []
				this.getList()
			},
			chageSelect2(e) {
				this.page = 0
				this.apisuo = false
				this.is_end = false
				this.lists = []
				this.getList()
			},
			chageSelect3() {
				this.page = 0
				this.apisuo = false
				this.is_end = false
				this.lists = []
				this.getList()
			},
			chageSelect4() {
				this.page = 0
				this.apisuo = false
				this.is_end = false
				this.lists = []
				this.getList()
			},
			chageSelect5() {

			}
		}
	}
</script>

<style lang="less" scoped>
	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}


	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}

	.ul {
		width: 100%;
		padding: 0px 10px;
		box-sizing: border-box;
		height: auto;
		overflow-y: auto;
	}

	.fanshuiBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-between;
		border-radius: 5px;
		background-color: var(--theme-bg-color);
	}

	.fanshuiBox>ul li {
		width: 16%;
		text-align: center;
	}

	.fanshuiBox>ul li:nth-child(1) {
		width: 20%;
	}

	.fanshuiBox>ul li:nth-child(6) {
		width: 10%;
	}

	.fanlistBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		justify-content: space-between;
		border-radius: 5px;
	}

	.fanlistBox>ul li {
		width: 16%;
		text-align: center;
		color: var(--theme-text-color);
	}

	.fanlistBox>ul li .liOne {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fanlistBox>ul li .liOne img {
		width: 45px;
		height: 35px;
	}

	.fanlistBox>ul li:nth-child(1) {
		width: 20%;
	}

	.fanlistBox>ul:nth-child(2n) {
		background-color: var(--theme-bg-color);
	}



	.con1One {
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 10px 0px;
		box-sizing: border-box;
		border-radius: 5px;
		margin-top: 20px;
	}

	.hitemTow {
		height: 30px;
		border-bottom: 2px solid transparent;
		line-height: 30px;
		font-size: 14px;
		color: #fff;
		margin-left: 30px;
		cursor: pointer;
	}

	.hitemTow:first-child {
		margin-left: 0;
	}

	.hitemTow.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.select_class {
		padding: 0 0.2rem;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		// overflow-x: scroll;
		line-height: 0.3rem;
		box-sizing: border-box;
	}

	.select_classThree {
		padding: 0 10px;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		font-size: 15px;
		margin: 20px 0 0px;
		box-sizing: border-box;
	}

	.headerTow {
		height: 36px;
		background: var(--theme-main-bg-color);
		border-bottom: 1px solid var(--theme-color-line);
		display: flex;
		padding: 0px 10px;
		justify-content: flex-start;
		align-items: center;
	}

	.tops {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 0.15rem;
		box-sizing: border-box;
	}

	.top1 {
		border: 0.07rem solid transparent;
		border-bottom: 0.09rem solid var(--theme-alt-neutral-2);
		height: 0;
		margin-bottom: 0.03rem;
		width: 0;
	}

	.top2 {
		border: 0.07rem solid transparent;
		border-top: 0.09rem solid var(--theme-alt-neutral-2);
		height: 0;
		width: 0;
	}

	select {
		max-width: 3.15rem;
		min-width: 1.6rem;
		width: auto !important;
		list-style: none;
		margin: 0;
		line-height: 1.5;
		outline: 0;
		// background-color: var(--theme-top-nav-bg)!important;
		background-color: var(--theme-main-bg-color)!important;
		border-radius: 0.5rem;
		box-shadow: none;
		color: var(--theme-text-color-lighten);
		font-size: .2rem;
		height: 0.5rem !important;
		text-align: center;
		border-color: var(--theme-color-line);
	}

	select:focus {
		// border-color: var(--theme-primary-color);
		border-color: var(--theme-ant-primary-color-13);
	}

	.pcSele {
		max-width: 150px;
		min-width: 90px;
		width: auto !important;
		list-style: none;
		margin: 0;
		line-height: 32px;
		outline: 0;
		background-color: var(--theme-main-bg-color)!important;
		border-radius: 16px;
		box-shadow: none;
		color: var(--theme-text-color-lighten);
		font-size: 12px;
		height: 32px !important;
		text-align: center;
		border-color: var(--theme-color-line);
	}

	.rightThree {
		width: 100%;
		margin: 60px 0;
	}

	.nodataTow {
		margin: 0 auto;
		text-align: center;
	}

	.nodataTow img {
		height: 150px;
		margin-bottom: 10px;
		margin: 0 auto;
		width: 170px;
	}

	.nodataTow div {
		color: var(--theme-alt-neutral-2);
		font-size: 16px;
	}

	option {
		// color: var(--theme-text-color);
		color: var(--theme-text-color-lighten);
	}

	.nodata {
		margin: 0 auto;
		text-align: center;
		margin-top: 2rem;
	}

	.nodata img {
		height: 3.62rem;
		margin-bottom: 0.1rem;
		margin: 0 auto;
		width: 4rem;
	}

	.nodata div {
		color: var(--theme-alt-neutral-2);
		font-size: .26rem;
	}

	.notice {
		width: 100vw;
		min-height: 100vh;
		background-color: var(--theme-bg-color);

		.nav_top_box {
			padding: 0.1rem 0.2rem 0;
			border-bottom: thin solid var(--theme-color-line);
			display: flex;

			.nav_item {
				font-size: .22rem;
				color: var(--theme-text-color-darken);
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				text-align: center;
				height: 0.72rem;
				margin-right: 0.6rem;

				.nav_text {
					font-weight: 300;
				}

				.nav_tab_box {
					height: 0.32rem;
					position: absolute;
					top: -0.02rem;
					right: -0.26rem;

					.tab_text {
						font-size: .18rem;
						height: 0.26rem;
						line-height: .26rem;
						padding: 0 0.04rem;
						background-color: var(--theme-secondary-color-error);
						border-radius: 0.125rem 0.125rem 0.125rem 0;
						color: #fff;
						width: 100%;
						font-weight: 300;
					}

					p:nth-child(2) {
						border-bottom: 0.07rem solid transparent;
						border-left: 0.07rem solid var(--theme-secondary-color-error);
						border-right: 0.07rem solid transparent;
						height: 0;
						width: 0;
					}
				}
			}

			.nav_active {
				border-bottom: 0.04rem solid var(--theme-primary-color);
				color: var(--theme-primary-color);
			}
		}

		.notice_box {
			.notice_item_box {
				padding: 0.2rem;

				.notice_item {
					min-height: 1.2rem;
					margin-bottom: 0.2rem;
					background-color: var(--theme-main-bg-color);
					border-radius: 0.1rem;
					box-shadow: 0 0.03rem 0.09rem 0 rgba(0, 0, 0, .06);
					padding: 0.2rem;
					display: flex;
					flex-shrink: 0;
					justify-content: space-between;
					align-items: center;

					&_left {
						display: flex;
						align-items: center;

						.left_icon {
							position: relative;

							.icons {
								color: var(--theme-active-bg-color);
								font-size: .5rem;
								margin-right: 0.3rem;
							}

						}

						.left_icon::after {
							background-color: var(--theme-secondary-color-error);
							border-radius: 100%;
							content: "";
							height: 0.12rem;
							position: absolute;
							right: 0.32rem;
							top: 0.44rem;
							width: 0.12rem;
						}

						.left_text_box {
							flex-grow: 1;
							display: flex;
							flex-direction: column;

							.top_text {
								font-size: .24rem;
								max-width: 3.8rem;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
								color: var(--theme-text-color-darken);
								display: inline-block;
								margin-bottom: 0.14rem;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.time_text {
								font-size: .2rem;
								color: var(--theme-text-color-lighten);
							}
						}

					}

					&_right {
						font-size: .24rem;
						color: var(--theme-text-color-darken);
						display: flex;
						align-items: center;
						font-weight: 300;

						.finish_text {
							color: var(--theme-text-color-lighten);
						}

						.icons {
							color: var(--theme-color-line);
							transform: rotate(180deg);
							font-size: .36rem;
							margin-left: 0.1rem;
							margin-bottom: 0.08rem;
						}
					}
				}
			}

			.bottom_white_boxTow {
				position: fixed;
				bottom: 0;
				background-color: var(--theme-top-nav-bg);;
				width: 100%;
				// height: 1rem;
				display: flex;
				align-items: center;
				padding-left: 10px;
				box-sizing: border-box;
			}

			.bottom_white_box {
				position: fixed;
				bottom: 0;
				// background-color: var(--theme-top-nav-bg);;
				background-color: var(--theme-main-bg-color);
  			  border-top: thin solid var(--theme-color-line);
				width: 100%;
				// height: 1rem;
				display: flex;
				align-items: center;
				padding-left: 0.5rem;

				// justify-content: flex-end;
				.right_btn {
					padding: 0.1rem 0.2rem;

					span {
						// background-color:var(--theme-alt-neutral-2);
						border-radius: 0.1rem;
						color: var(--theme-alt-neutral-2);
						font-size: .2rem;
						width: 1.2rem;
						height: 0.5rem;
						line-height: .5rem;
						display: block;
						text-align: center;
						font-weight: 300;
					}
				}
			}
		}

		.fanshuiritem {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: var(--theme-top-nav-bg);;
			border-radius: 0.12rem;
			font-size: .2rem;
			margin-bottom: 0.2rem;
			min-height: 1.1rem;
			padding: 0.2rem 0 0.2rem 0.1rem;
		}

		.fanshuiritem .left {
			width: 0.7rem;
			margin-top: -0.1rem;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: rgb(173, 182, 196);
		}

		.fanshuiritem .left img {
			width: 0.5rem;
			height: 0.5rem;
		}

		.fanshuiritem .center {
			flex: 1;
			padding-left: 0.1rem;
			color: var(--theme-alt-neutral-2);
		}

		.fanshuiritem .center .up {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 0.14rem;
		}

		.fanshuiritem .center .up .righttext {
			flex-shrink: 0;
			padding-left: 0rem;
			padding-right: 0.06rem;
			/* width: 1.76rem; */
			text-align: left;
		}

		.fanshuiritem .icon {
			color: var(--theme-color-line);
			padding: 0 0.18rem 0 0;
		}

		.fanshuiritem .icon svg {
			display: block;
			height: 0.26rem;
			transform: rotate(180deg);
			width: 0.26rem;
		}
	}
</style>